<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
    <meta name="keywords" content="橡皮音乐 橡皮音乐官网 网页版 橡皮音乐网页版 歌曲 下载 免费下载 在线播放 流行音乐 lifanko">
    <meta name="description" content="橡皮音乐 橡皮音乐官网 网页版 橡皮音乐网页版 歌曲 下载 免费下载 在线播放 流行音乐 lifanko">
    <title>橡皮音乐官网 - 最新最全音乐全部免费下载</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link type="text/css" href="assets/css/index.css" rel="stylesheet">
</head>
<body>
<div id="eraser_music">
    <div class="background">
        <div class="mask"></div>
        <div class="image" id="image"
             :style="{backgroundImage: 'url(' + present.album + ')', opacity: ready ? 1 : 0}"></div>
    </div>
    <div class="main">
        <div class="top">
            <div class="brand-name">橡皮音乐Pro</div>
            <div class="brand-slogan">自由下载你喜欢的每一首歌。访客计数：{{visits || 0}}。</div>
        </div>
        <div class="box" style="opacity: 0" :style="{opacity: ready ? 1 : 0}">
            <div class="player">
                <!--封面-->
                <div :class="'album' + (present.status === 'playing' ? ' active':'')">
                    <img :src="present.album" v-on:error="err_album()" alt="album">
                </div>
                <!--歌手信息-->
                <div class="info">
                    <div class="title">
                        <div class="name" v-if="present.name">{{present.name}}</div>
                        <div class="name" v-if="!present.name">未在播放</div>
                        <div class="author">{{present.author}}</div>
                    </div>
                    <div class="download" v-on:click="download" v-if="present.name">下载</div>
                </div>
                <!--控制台-->
                <div class="control">
                    <div class="progress">
                        <div class="time_line">
                            <input type="range" min="0" :max="present.total" step="1" v-model="present.counter"
                                   class="bar"
                                   v-on:input="seek_start" v-on:click="seek_end">
                        </div>
                        <div class="time_text">
                            <div>{{present.past}}</div>
                            <div v-if="present.seeking" class="seek">{{sec2time(present.counter)}}</div>
                            <div>{{present.left}}</div>
                        </div>
                    </div>
                    <div class="ctl">
                        <div v-on:click="prev"><img src="assets/img/prev.png" alt="上一曲"></div>
                        <div v-on:click="play">
                            <img v-show="present.status==='playing'" src="assets/img/pause.png" alt="暂停">
                            <img v-show="present.status!=='playing'" src="assets/img/play.png" alt="播放">
                        </div>
                        <div v-on:click="next('')"><img src="assets/img/next.png" alt="下一曲"></div>
                    </div>
                    <div class="volume">
                        <div>
                            <svg t="1628931994752" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="807" width="128" height="128">
                                <path d="M512 648c92.8 0 168-75.2 168-168V304c0-92.8-75.2-168-168-168S344 211.2 344 304v176c0 92.8 75.2 168 168 168zM392 304c0-65.6 54.4-120 120-120s120 54.4 120 120v176c0 65.6-54.4 120-120 120s-120-54.4-120-120V304z"
                                      p-id="808" fill="#bfbfbf"></path>
                                <path d="M768 408c-12.8 0-24 11.2-24 24v56C744 616 640 720 512 720s-232-104-232-232V432c0-12.8-11.2-24-24-24s-24 11.2-24 24v56c0 145.6 113.6 267.2 256 278.4v73.6h-64c-12.8 0-24 11.2-24 24s11.2 24 24 24h176c12.8 0 24-11.2 24-24s-11.2-24-24-24h-64v-73.6c142.4-12.8 256-132.8 256-278.4V432c0-12.8-11.2-24-24-24z"
                                      p-id="809" fill="#bfbfbf"></path>
                            </svg>
                        </div>
                        <div class="volume_line">
                            <label>
                                <input type="range" v-model="volume" v-on:change="set_volume">
                            </label>
                        </div>
                    </div>
                </div>
                <!--信息-->
                <div class="user">
                    <div><img src="assets/img/info.png" alt="icon"></div>
                    <div class="label">
                        <div>标识符：{{uid}}</div>
                        <div class="version">
                            <div>后台：{{version.backend ? 'v' + version.backend :'无法连接'}}</div>
                            <div>播放器：v{{version.player}}</div>
                            <div>&copy; <a>lifanko</a></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="separate"></div>
            <div class="resource">
                <!--菜单栏-->
                <div class="menu">
                    <div :class="menu.a" v-on:click="sw_menu('a')">搜索</div>
                    <div :class="menu.b" v-on:click="sw_menu('b')">歌词</div>
                    <div :class="menu.c" v-on:click="sw_menu('c')">列表</div>
                </div>
                <!--搜索tab-->
                <div class="search" v-show="menu.a==='active'">
                    <label>
                        <input type="text" v-model="keyword" placeholder="输入 歌曲/歌手/专辑 开始搜索" autofocus
                               autocomplete="off">
                    </label>
                    <div class="head">
                        <div>请选择搜索目标</div>
                    </div>

                    <div v-if="searching.msg === undefined" class="no_target">后端接口（数据）错误，无法找到搜索目标</div>

                    <div class="lib" v-if="!searching.msg">
                        <div v-for="(item, index) in search_param.platform" v-on:click="search(index)">{{item}}</div>
                    </div>
                    <div v-if="searching.msg" class="tip">{{searching.msg}}</div>
                    <div class="head">
                        <div>热门搜索</div>
                    </div>
                    <div class="hot">
                        <div class="item" v-for="item in search_param.hot" v-on:click="set_keyword(item)">{{item}}</div>
                    </div>
                    <div class="no_list" v-if="search_param.hot.length===0">无记录</div>
                    <div class="head">
                        <div>历史搜索</div>
                        <div v-if="search_param.history.length" v-on:click="wipe('history_search')">
                            <span class="btn" v-if="wipe_time.history_search===0">清除</span>
                            <span class="btn" v-else>请在 {{wipe_time.history_search}}秒内 再次点击</span>
                        </div>
                    </div>
                    <div class="hot">
                        <div class="item" v-for="item in search_param.history" v-on:click="set_keyword(item)">{{item}}
                        </div>
                    </div>
                    <div class="no_list" v-if="search_param.history.length===0">无记录</div>
                </div>
                <!--歌词tab-->
                <div class="scroll-view" v-show="menu.b==='active'">
                    <div class="lyric" :style="LYRIC.style">
                        <div v-for="item in LYRIC.resource" :class="item.active ? 'paragraph active':'paragraph'">
                            {{item.text}}
                        </div>
                    </div>
                </div>
                <!--列表tab-->
                <div class="scroll-view" v-show="menu.c==='active'">
                    <div class="head">
                        <div>待播清单</div>
                        <div class="pending" v-if="pending">正在加载歌曲...</div>
                    </div>
                    <div class="list" v-if="list.length">
                        <div class="item" v-for="(item, index) in list">
                            <div><img :src="item.album" alt="album" v-on:error="err_album('list',index)"></div>
                            <div :class="present.id === item.id?'info active':'info'" v-on:click="select(item.id)">
                                <div class="song">
                                    <div class="name">{{item.name}}</div>
                                    <div class="author">{{item.author}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="no_list" v-if="list.length===0">无待播内容，去<a v-on:click="sw_menu('a')">搜索</a>音乐</div>
                    <div class="head">
                        <div>历史播放</div>
                        <div v-if="history.length" v-on:click="wipe('history_play')">
                            <span class="btn" v-if="wipe_time.history_play===0">清除</span>
                            <span class="btn" v-else>请在 {{wipe_time.history_play}}秒内 再次点击</span>
                        </div>
                    </div>
                    <div class="list" v-if="history.length">
                        <div class="item" v-for="(item, index) in history">
                            <div class="list_album"><img :src="item.album" alt="album"
                                                         v-on:error="err_album('history',index)"></div>
                            <div class="info" v-on:click="add(index)">
                                <div class="song">
                                    <div class="name">{{item.name}}</div>
                                    <div class="author">{{item.author}}</div>
                                </div>
                                <div class="extra">
                                    <div class="source">{{item.platform_text}}</div>
                                    <div class="time">{{item.timestamp}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="no_list" v-if="history.length===0">暂无播放历史</div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.lifanko.cn/jquery-2.1.1.min.js"></script>
<script src="https://cdn.lifanko.cn/js/vue.min.js"></script>
<script src="https://cdn.lifanko.cn/js/tip.min.js"></script>
<script src="https://cdn.lifanko.cn/js/MTitle.min.js"></script>
<script src="assets/js/EraserMusic.min.js"></script>
</body>
</html>